<template>
  <div class="content-section">
    <h3 class="section-title">课程教学总结内容</h3>
    <el-divider />
    <el-tabs type="card" v-model="activeTab">
      <el-tab-pane label="教学设计与实施" name="design">
        <el-form-item prop="designAndImplementation">
          <RichTextEditor 
            v-model="formData.designAndImplementation" 
            placeholder="请输入教学设计与实施情况，包括教学目标、教学内容、教学方法、教学过程等" 
            height="500px"
          />
        </el-form-item>
      </el-tab-pane>
      
      <el-tab-pane label="考试考核" name="assessment">
        <el-form-item prop="assessment">
          <RichTextEditor 
            v-model="formData.assessment" 
            placeholder="请输入考试考核情况，包括考核方式、考核标准、成绩分析等" 
            height="500px"
          />
        </el-form-item>
      </el-tab-pane>
      
      <el-tab-pane label="教学反思与改进" name="reflection">
        <el-form-item prop="reflectionAndImprovement">
          <RichTextEditor 
            v-model="formData.reflectionAndImprovement" 
            placeholder="请输入教学反思与改进建议，包括教学效果分析、存在问题、改进措施等" 
            height="500px"
          />
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { computed, ref } from 'vue';
import RichTextEditor from '@/components/common/RichTextEditor.vue';

export default {
  name: 'SummaryContentTabs',
  components: {
    RichTextEditor
  },
  props: {
    modelValue: {
      type: Object,
      required: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const activeTab = ref('design'); // 默认显示教学设计与实施标签页
    
    const formData = computed({
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value)
    });

    return {
      activeTab,
      formData
    };
  }
};
</script>

<style scoped>
/* 内容区域样式 */
.content-section {
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background-color: #ffffff;
}

.content-section .section-title {
  color: #495057;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

/* 深度选择器样式 */
:deep(.el-tabs__header) {
  margin-bottom: 25px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-divider) {
  margin: 15px 0;
}

/* 文本区域左对齐 */
:deep(.el-textarea__inner) {
  text-align: left;
  resize: vertical;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-section {
    padding: 15px;
  }
}
</style>